<template>
  <div id="app">
    <!-- 组件可直接绑定 Table Attributes 或者 Table Events -->
    <common-table
      :tableConfig="tableConfig"
      :stripe="true"
      :border="true"
      @cell-click="cellClick"
    >
      <!-- 操作列的 数据 插槽 -->
      <template #editSlot="rowData">
        <div>
          <button @click="binaji(rowData)">编辑</button>
        </div>
      </template>

      <template #showNum="rowData">
        <div>
          <edit-box
            v-model="rowData.rowData.row.number"
            :can-edit="true"
            :rowData="rowData"
            @afterEdit="afterEdit"
          />
        </div>
      </template>

      <!-- 操作列的表头 插槽 -->
      <template #editHeadSlot>
        <div>
          <span style="color:red">操作</span>
        </div>
      </template>
    </common-table>
    <el-button type="primary" @click="addRow">+</el-button>
  </div>
</template>

<script>
import _ from "lodash";
import CommonTable from "./components/Table.vue";
import EditBox from "./components/edit.vue";

export default {
  name: "App",
  components: {
    CommonTable,
    EditBox,
  },
  data() {
    return {
      showText: true,
      tableConfig: {
        config: {
          showIndex: false, //是否显示行号
          showCheckBox: false, //是否显示多选框
          columns: [
            {
              name: "日期",
              prop: "date",
              width: 300,
              sortable: true,
              resizable: true,
              fixed: true,
            },
            {
              name: "姓名",
              prop: "name",
              width: 150,
              hide: true, //是否隐藏列
            },
            {
              name: "地址",
              prop: "address",
              fixed: true,
            },
            {
              slotname: "showNum", // 自定义插槽列名称
              name: "工时",
              prop: "number",
            },
          ],
          // 是否需要分页
          hasPagination: true,
          // 分页配置
          paginationConfig: {
            // 分页选项配置
            pageSizes: [100, 200, 300, 400],
            // 操作按钮
            layout: "total,sizes, prev, pager, next",
            // 当前选择的分页选项
            pageSize: 100,
            // 总共条数
            total: 1000,
          },
        },
        // data: [
        //   {
        //     date: "2016-05-02",
        //     name: "王小虎",
        //     address: "上海市普陀区金沙江路 1518 弄",
        //   },
        //   {
        //     date: "2016-05-04",
        //     name: "王小虎",
        //     address: "上海市普陀区金沙江路 1517 弄",
        //   },
        //   {
        //     date: "2016-05-01",
        //     name: "王小虎",
        //     address: "上海市普陀区金沙江路 1519 弄",
        //   },
        //   {
        //     date: "2016-05-03",
        //     name: "王小虎",
        //     address: "上海市普陀区金沙江路 1516 弄",
        //   },
        // ],
        data: [
          {
            id: 1,
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            number: 1,
          },
          {
            id: 2,
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
            number: 1,
          },
          {
            id: 3,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
            number: 1,
            children: [
              {
                id: 31,
                date: "2016-05-01",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1519 弄",
                number: 1,
              },
              {
                id: 32,
                date: "2016-05-01",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1519 弄",
                number: 1,
              },
            ],
          },
          {
            id: 4,
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
            number: 1,
          },
        ],
        tableData1: [
          {
            id: 1,
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            number: 1,
          },
          {
            id: 2,
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
            number: 1,
          },
          {
            id: 3,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
            hasChildren: true,
            number: 1,
          },
          {
            id: 4,
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
            number: 1,
          },
        ],
      },
    };
  },
  methods: {
    binaji(data) {
      console.log("data", data);
    },
    cellClick(row, column, cell, event) {
      console.log("event", event);
      console.log("cell", cell);
      console.log("column", column);
      console.log("row", row);
    },
    numclick() {
      if (!this.showText) {
        return;
      }
      this.showText = !this.showText;
    },
    blur() {
      this.showText = true;
    },
    afterEdit(data) {
      console.log("data", data);
    },
    addRow() {
      let rowData = _.cloneDeep(this.tableConfig.data.slice(-1)[0]);
      Object.keys(rowData).map((ele) => {
        rowData[ele] = null;
      });
      this.tableConfig.data.push(rowData);
    },
  },
  mounted() {
    setTimeout(() => {
      // 生成表头数据配置数组
      let arr = new Array(100).fill(0);
      let newarr = arr.map((ele, index) => {
        return {
          slotname: "showNum", // 自定义插槽列名称
          name: "工时",
          prop: `number_${index}`,
        };
      });
      console.log("newarr", newarr);
      let old = this.tableConfig.config.columns;
      this.$set(this.tableConfig.config, "columns", [...old, ...newarr]);
      // 生成展示数据
    }, 3000);
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
